<body>
	<!-- partial:index.partial.html -->
	<form>
		<div class="login">
			login <label for="email" class="email" />
			<svg
				t="1571543400166"
				class="email-icon"
				viewBox="0 0 1024 1024"
				version="1.1"
				xmlns="http://www.w3.org/2000/svg"
				p-id="2555"
				width="32"
				height="32"
			>
				<path
					d="M938.666667 853.333333 85.333333 853.333333c-47.061333 0-85.333333-38.272-85.333333-85.333333L0 256c0-47.061333 38.272-85.333333 85.333333-85.333333l853.333333 0c47.061333 0 85.333333 38.272 85.333333 85.333333l0 512C1024 815.061333 985.728 853.333333 938.666667 853.333333zM85.333333 213.333333c-23.530667 0-42.666667 19.136-42.666667 42.666667l0 512c0 23.530667 19.136 42.666667 42.666667 42.666667l853.333333 0c23.530667 0 42.666667-19.136 42.666667-42.666667L981.333333 256c0-23.530667-19.136-42.666667-42.666667-42.666667L85.333333 213.333333z"
					p-id="2556"
					fill="#ffffff"
				/>
				<path
					d="M512 622.741333 137.749333 380.586667c-9.898667-6.421333-12.736-19.605333-6.336-29.504s19.605333-12.714667 29.504-6.336L512 571.925333 863.082667 344.746667c9.898667-6.378667 23.104-3.562667 29.504 6.336s3.562667 23.082667-6.336 29.504L512 622.741333z"
					p-id="2557"
					fill="#ffffff"
				/>
				<path
					d="M128.021333 725.333333c-6.890667 0-13.674667-3.328-17.770667-9.493333-6.549333-9.813333-3.904-23.04 5.909333-29.589333l192-128c9.813333-6.549333 23.061333-3.904 29.589333 5.909333 6.549333 9.813333 3.904 23.04-5.909333 29.589333l-192 128C136.192 724.16 132.074667 725.333333 128.021333 725.333333z"
					p-id="2558"
					fill="#ffffff"
				/>
				<path
					d="M895.978667 725.333333c-4.053333 0-8.170667-1.173333-11.818667-3.584l-192-128c-9.813333-6.549333-12.458667-19.776-5.909333-29.589333 6.528-9.813333 19.754667-12.458667 29.589333-5.909333l192 128c9.813333 6.549333 12.458667 19.776 5.909333 29.589333C909.653333 722.005333 902.869333 725.333333 895.978667 725.333333z"
					p-id="2559"
					fill="#ffffff"
				/>
			</svg>
			<input id="email" name="email" type="email" required="" />
			<label for="password" class="password" />
			<svg
				t="1571545542779"
				class="password-icon"
				viewBox="0 0 1024 1024"
				version="1.1"
				xmlns="http://www.w3.org/2000/svg"
				p-id="3667"
				width="32"
				height="32"
			>
				<path
					d="M804.571429 1023.975619 219.428571 1023.975619C165.571048 1023.975619 121.904762 1004.714667 121.904762 950.832762L121.904762 536.356571C121.904762 482.499048 165.571048 438.832762 219.428571 438.832762L219.428571 438.832762 219.428571 292.547048 219.428571 292.547048C219.428571 130.974476 350.403048-0.024381 512-0.024381 673.572571-0.024381 804.571429 130.974476 804.571429 292.547048L804.571429 438.832762C858.428952 438.832762 902.095238 482.499048 902.095238 536.356571L902.095238 950.832762C902.095238 1004.714667 858.428952 1023.975619 804.571429 1023.975619ZM755.809524 292.547048 755.809524 292.547048C755.809524 292.547048 755.809524 292.547048 755.809524 292.547048 755.809524 157.891048 646.631619 48.737524 512 48.737524 377.344 48.737524 268.166095 157.891048 268.166095 292.547048 268.166095 292.547048 268.166095 292.547048 268.166095 292.547048L268.190476 292.547048 268.190476 438.832762 755.809524 438.832762 755.809524 292.547048ZM853.333333 536.356571C853.333333 509.44 831.488 487.594667 804.571429 487.594667L219.428571 487.594667C192.487619 487.594667 170.666667 509.44 170.666667 536.356571L170.666667 950.832762C170.666667 977.773714 192.487619 975.213714 219.428571 975.213714L804.571429 975.213714C831.488 975.213714 853.333333 977.773714 853.333333 950.832762L853.333333 536.356571ZM536.380952 801.109333 536.380952 877.714286C536.380952 891.172571 525.458286 902.095238 512 902.095238 498.541714 902.095238 487.619048 891.172571 487.619048 877.714286L487.619048 801.109333C445.635048 790.235429 414.47619 752.420571 414.47619 707.023238 414.47619 653.165714 458.142476 609.499429 512 609.499429 565.857524 609.499429 609.52381 653.165714 609.52381 707.023238 609.52381 752.420571 578.364952 790.235429 536.380952 801.109333ZM512 658.261333C485.059048 658.261333 463.238095 680.106667 463.238095 707.023238 463.238095 733.96419 485.059048 755.809524 512 755.809524 538.916571 755.809524 560.761905 733.96419 560.761905 707.023238 560.761905 680.106667 538.916571 658.261333 512 658.261333Z"
					p-id="3668"
					fill="#ffffff"
				/>
			</svg>
			<input type="password" id="password" name="password" required="" />
			<span class="submit">logged in</span>
		</div>
	</form>
	<!-- partial -->
</body>

<style>
	@import url(https://fonts.googleapis.com/css?family=Lato);
	body {
		display: -webkit-box;
		display: flex;
		height: 100vh;
		-webkit-box-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		align-items: center;
		background: #e7e5e8;
		font-family: Lato, sans-serif;
	}

	.login {
		position: relative;
		z-index: 2;
		display: -webkit-box;
		display: flex;
		-webkit-box-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		align-items: center;
		width: 14em;
		height: 2.4em;
		color: white;
		font-size: 1.5em;
		text-transform: uppercase;
		border-radius: 0.2em;
		box-shadow: 0 0px 1.1px -5px rgba(0, 0, 0, 0.042), 0 0px 2.7px -5px rgba(0, 0, 0, 0.061),
			0 0px 5px -5px rgba(0, 0, 0, 0.075), 0 0px 8.9px -5px rgba(0, 0, 0, 0.089),
			0 0px 16.7px -5px rgba(0, 0, 0, 0.108), 0 0px 40px -5px rgba(0, 0, 0, 0.15);
		overflow: hidden;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		cursor: pointer;
		-webkit-transition: 0.5s;
		transition: 0.5s;
	}
	.login svg {
		position: absolute;
		top: 0.6em;
		right: 11.9em;
		-webkit-transition: 0.5s ease;
		transition: 0.5s ease;
	}
	.login svg.email-icon {
		opacity: 0;
	}
	.login svg.password-icon {
		-webkit-transform: translateY(-100%) scale(0);
		transform: translateY(-100%) scale(0);
	}
	.login input#email {
		position: absolute;
		left: 0;
		top: 0;
		padding: 0 0 0 30px;
		width: 100%;
		height: 100%;
		font-size: 1.2em;
		color: #71798e;
		border: none;
		-webkit-transform-origin: right;
		transform-origin: right;
		-webkit-transform: scaleX(0.82);
		transform: scaleX(0.82);
		z-index: -2;
	}
	.login label.email {
		position: absolute;
		left: 0;
		top: 0;
		display: -webkit-box;
		display: flex;
		-webkit-box-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background: #457efd;
		-webkit-transform-origin: left;
		transform-origin: left;
		-webkit-transition: 0.7s cubic-bezier(0.8, 0, 0.25, 1);
		transition: 0.7s cubic-bezier(0.8, 0, 0.25, 1);
		z-index: -1;
	}
	.login input#password {
		position: absolute;
		left: 0;
		top: 0;
		padding: 0 0 0 30px;
		width: 100%;
		height: 100%;
		font-size: 1.2em;
		color: #71798e;
		border: none;
		-webkit-transform-origin: right;
		transform-origin: right;
		-webkit-transform: scaleX(0.82);
		transform: scaleX(0.82);
		z-index: -4;
	}
	.login label.password {
		position: absolute;
		left: 0;
		top: 0;
		display: -webkit-box;
		display: flex;
		-webkit-box-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background: #457efd;
		-webkit-transform-origin: left;
		transform-origin: left;
		-webkit-transition: 0.7s cubic-bezier(0.8, 0, 0.25, 1);
		transition: 0.7s cubic-bezier(0.8, 0, 0.25, 1);
		-webkit-transform: scaleX(0.21);
		transform: scaleX(0.21);
		z-index: -3;
	}
	.login span.submit {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 3;
		display: none;
		-webkit-box-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		align-items: center;
		width: 100%;
		height: 100%;
		color: white;
	}
	.login.email-input {
		color: transparent;
	}
	.login.email-input label.email {
		-webkit-transform: scaleX(0.21);
		transform: scaleX(0.21);
	}
	.login.email-input svg.email-icon {
		opacity: 1;
	}
	.login.password-input {
		color: transparent;
	}
	.login.password-input svg.email-icon {
		-webkit-transform: translateY(100%) scale(0);
		transform: translateY(100%) scale(0);
	}
	.login.password-input svg.password-icon {
		-webkit-transform: translateY(0) scale(1);
		transform: translateY(0) scale(1);
	}
	.login.password-input label.email {
		display: none;
	}
	.login.password-input input#email {
		display: none;
	}
	.login.submit {
		color: transparent;
		pointer-events: none;
	}
	.login.submit label.password {
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}
	.login.submit svg.password-icon {
		-webkit-transform: translateY(100%) scale(0);
		transform: translateY(100%) scale(0);
	}
	.login.submit span.submit {
		display: -webkit-box;
		display: flex;
	}
	.login.submit label.email {
		display: none;
	}
	.login.submit input#email {
		display: none;
	}
</style>
